<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2019/10/7
  Time: 11:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>悠U</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">
    <!-- 引入外部的css样式 -->
    <%--<link rel="stylesheet" href="${path}/plugins/bootstrap/css/animate.css" type="text/css">--%>
    <%--<link rel="stylesheet" href="${path}/plugins/bootstrap/css/font-awesome.css?v=4.4.0" type="text/css">--%>

    <!-- 引用自己写的css样式 -->
    <link href="${path}/css/index/index.css" rel="stylesheet" type="text/css">

    <!-- 滚动显示相关游记 -->
    <link rel="stylesheet" href="${path}/css/note/jq22.css" type="text/css"/>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <!-- <script src="../..noteinfonote/jquery-latest.pack.js" type="text/javascript"></script> -->

    <%--css样式--%>
    <link rel="stylesheet" href="${path}/css/note/noteinfo.css" type="text/css"/>

    <!-- 引入post - css -->
    <link rel="stylesheet" href="${path}/css/note/post.css">
    <link rel="stylesheet" href="${path}/plugins/layui/css/layui.css">


</head>

<body>
<!--响应式导航-->
<jsp:include page="../common/nav_top.jsp"/>

<!-- 主图片 begin -->
<div class="container-fluid">
    <div class="row">
        <div>
            <img src="https://n4-q.mafengwo.net/s14/M00/91/FD/wKgE2l1LzCyAajgLAAg-9Chwsso49.jpeg?imageMogr2%2Fstrip"
                 style="height: 506px;width: 100%">
            <div style="position:absolute;width: 100%;height:90px;z-index:1;left:0%;top:470px;">
                <div
                        style="position:relative;width:710px;height:80px;z-index:1;left:380px;top:0%;padding-top: 20px;">
                    <font size="5px" color="white"><b>${notes.title}</b></font>
                    <input id="notId" value="${notes.id}" style="display: none">
                </div>
                <div
                        style="position:absolute;width: 90px;;height:80px;z-index:3;left:1090px;top:0;text-align: center">
                    <c:if test="${!empty userLogin}">
                        <a onclick="good(${notes.id})"><img src="http://pzgv309jp.bkt.clouddn.com/fabulous.gif"
                                                            style="height: 50px;width: 50px"></a></c:if>
                    <c:if test="${empty userLogin}">
                        <a href="${path}/userlogin/login"><img src="http://pzgv309jp.bkt.clouddn.com/fabulous.gif"
                                                               style="height: 50px;width: 50px"></a></c:if><br>
                    <font size="2px" color="white"><b><span id="goodnum">${notes.support}</span></b></font>
                </div>

            </div>
        </div>

    </div>


</div>

<!-- 主图片 end -->

<div class="container-fluid">
    <div class="row">
        <div class="note-author" style="height:35px;box-shadow: 0px 0px 5px gray;">
            <div style="position:relative;width: 120px;;height:120px;z-index:2;left:225px;top:-90px;">
                <a href="${path}/travelerInfoDis/travelerInfo?id=${userTable.id}"><img id="author-headerImg" class="img-circle"
                                                                    src="${userTable.headImg}"></a>
                <div style="position:absolute;width: 33px;;height:33px;z-index:2;left:74%;top:78%;">
                    <c:if test="${noteAuthor.flag==1}">
                        <img id="author-crown" class="img-circle" src="http://pzgv309jp.bkt.clouddn.com/crown.jpg">
                    </c:if>
                </div>
            </div>
            <div
                    style="position:relative;width: 600px;;height:33px;z-index:2;left:380px;top:-118px;padding-top: 10px;">
                <a href="${path}/travelerInfoDis/travelerInfo?id=${userTable.id}"class="per_name">${userTable.username}&nbsp;(${userTable.usualPlace})</a>
                <%--<a href="#">&nbsp;&nbsp;<img class="btn_sfollow"--%>
                                                             <%--src="${path}/imgs/note/btn_sfollow.gif"></a>--%>
                &nbsp;&nbsp;&nbsp;&nbsp;<font size="2px" color="gray"><b>
                <fmt:formatDate value="${notes.publishTime}" pattern="yyyy-MM-dd" var="year"/>${year}&nbsp;
                <fmt:formatDate value="${notes.publishTime}" pattern="hh:mm:ss" var="year"/>${year}
            </b></font>
                &nbsp;&nbsp;&nbsp;&nbsp;<a href="#"></a><span class="glyphicon glyphicon-star-empty"
                                                              aria-hidden="true" style="size: 20px;">收藏</span></a>
                &nbsp;&nbsp;&nbsp;&nbsp; <a href="#comm"><i class="fa fa-commenting-o"></i>评论</a>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-eye-open"
                                              aria-hidden="true">${notes.commentsum}</span>
            </div>
        </div>
    </div>
</div>


<!-- 文章主体 -->
<div class="container-fluid" style="margin-top:20px;width: 1000px;padding-top:20px;">
    <div class="row">
        <div class="left" style="width: 70%;float: left;">
            <div class="context-head"
                 style="width: 100%;height:80px;border:1px dashed rgb(214, 200, 200);float: left;">
                <div class="col-md-5 dir_list" style="height: 40px;padding-top: 10px;">
                    <ul>
                        <li class="time">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出发时间&nbsp;<span>/</span>&nbsp;2019-08-20<i></i></li>

                    </ul>
                </div>
                <div class="col-md-3 dir_list" style="height: 40px;padding-top: 10px;">
                    <ul>
                        <li class="day">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出行天数&nbsp;<span>/</span>&nbsp;2天<i></i>
                        </li>

                    </ul>
                </div>
                <div class="col-md-3 dir_list" style="height: 40px;padding-top: 10px;">
                    <ul>
                        <li class="people">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;伙伴&nbsp;<span>/</span>&nbsp;朋友<i></i>
                        </li>

                    </ul>
                </div>
                <div class="col-md-4 dir_list" style="height: 40px;padding-top: 10px;">
                    <ul>
                        <li class="cost">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;人均费用&nbsp;<span>/</span>&nbsp;10000RMB<i></i></li>

                    </ul>
                </div>

            </div>

            <%--根据是否收费异步操作--%>
            <div id="notecon" class="context" style="margin-top:100px;padding-right:30px; ">

            </div>


        </div>
        <div class="right" style="width: 290px;float: left;margin-left: 7px">

            <div class="m">
                <font size="3px" color="grey">相关游记:</font><br>
                <div class="demo1" style="padding-top:10px ">
                    <ul>
                        <c:forEach items="${notesBack}" var="n">
                            <a href="${path}/noteInfoDis/noteDis?id=${n.id}">
                                <li>
                                    <div class="thumbnail">
                                        <img src="${n.frontImg}" style="height: 190px;width:100%">
                                        <font size="3px" color="grey">${n.title}</font><br>
                                        <span class="glyphicon glyphicon-eye-open" aria-hidden="true"
                                              style="color: gray"></span>
                                        <font size="2px" color="black">${n.browse}</font>
                                    </div>

                                </li>
                            </a>
                        </c:forEach>

                    </ul>
                </div>
            </div>

        </div>

    </div>
</div>

<div id="comments">

</div>


<!-- 底部导航 begin -->
<jsp:include page="../common/nav_bottom.jsp"/>

<%--<input type="hidden" value="${userlogin.username}" id="">--%>

<%--目的:为了让外部的js文件使用灵活的项目的上下文路径--%>
<input type="hidden" value="${path}" id="path">

<script>
    $(function () {
        //如果js和jsp在同一个文件中,那么可以在js中使用EL表达式
        //如果js是单独的外部文件,则不允许使用EL表达式
        $("#comments").load("${path}/com/comment?noteId=${notes.id}");
    });
    $(function () {
        //如果js和jsp在同一个文件中,那么可以在js中使用EL表达式
        //如果js是单独的外部文件,则不允许使用EL表达式
        $("#notecon").load("${path}/noteInfoDis/judge?id=${notes.id}");

    });

</script>


<!-- 底部导航 end -->

<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="${path}/plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>

<!-- 自定义js -->
<script src="${path}/js/content.js?v=1.0.0"></script>
<script src="${path}/js/index/lunbo.js"></script>

<!-- 滚动显示相关游记 -->
<script src="${path}/js/note/jcarousellite_1.0.1c4.js" type="text/javascript"></script>


<%--侧面滚动显示--%>
<script src="${path}/js/note/carousellist.js"></script>

<!-- 引入post - js -->
<script src="${path}/js/note/post.js"></script>
<script type="text/javascript" src="${path}/plugins/layui/layui.all.js"></script>


<script>
    function pubone() {
        var content = document.getElementById("contentone").value;
        $.post("${path}/send/sendComOne", {
            noteId: ${notes.id},
            content: content,
            userId:${userLogin.id}
        }, function (data) {
            $("#comments").load("${path}/com/comment", {noteId: data.noteId});
        });
    }
</script>
<script>
    //搜索
    function saveTwo(cid) {

        var noteId = document.getElementById("noteId").value;
        var userId = document.getElementById("userId" + cid).value;
        var content = document.getElementById("content" + cid).value;
        var floor = document.getElementById("floor" + cid).value;

        $.post("${path}/send/sendComTwo", {
            noteId: ${notes.id},
            floor: floor,
            userId: userId,
            content: content
        }, function (data) {
            $("#comments").load("${path}/com/comment", {noteId: data.noteId});
        });

//        window.location = '/uyou/send/sendComTwo?noteId='+noteId+'&cid='+cid+'&userId='+userId+'&content='+content
    }
</script>
<script>
    function saveThree(comId) {

        var noteId = document.getElementById("noteIdThree").value;
        var floor = document.getElementById("floorThree" + comId).value;
        var userId = document.getElementById("userIdThree" + comId).value;
        var content = document.getElementById("contentThree" + comId).value;

        $.post("${path}/send/sendComThree", {
            userId: userId,
            content: content,
            floor: floor,
            noteId: noteId
        }, function (data) {
            $("#comments").load("${path}/com/comment", {noteId: data.noteId});
        });

//        window.location = '/uyou/send/sendComThree?userId='+userId+'&content='+content+'&floor='+floor+'&noteId='+noteId
    }

</script>


<%--点赞--%>
<script>
    function good(obj) {
        $.post("${path}/praise/addPraise", {noteId: obj}, function (data) {
//            console.log("1:" + data);
            if (data.flag) {
                alert(data.message);
                var number = parseInt(${notes.support})+1;
                document.getElementById("goodnum").innerHTML = number;
            } else {
                alert(data.message);
                document.getElementById("goodnum").innerHTML = ${notes.support};
            }
        });

    }
</script>

</body>

</html>